<template>
    <popup
        ref="popupRef"
        width="80%"
        title='妥投登记'
        class="bg-page"
        :async="true"
        confirmButtonText="登记"
        @confirm="handleConfirm"
        @close="handleClose"
    >
        
        <el-form class="-mb-4" :model="queryFormData" label-width="98px" @submit.native.prevent inline>
            
            <div class="flex">
                <div class="flex-1">
                    <el-form-item label="物流单号">
                        <el-input
                            placeholder="请输入物流单号"
                            
                            class="w-64"
                            v-model="queryFormData.logisticNumber"
                            clearable
                            @keyup.enter="handleDeliverRegister"
                        >
                        
                        </el-input>
                    </el-form-item>
                </div>
                
                
                <div class=" flex flex-1  justify-end">
                    <el-form-item>
                        <el-button class="mx-2" type="primary" @click="handleDeliverRegister">查询</el-button>
                    </el-form-item>
                </div>
            
            </div>
        </el-form>
        
        
        <el-card class="!border-none mt-5" shadow="never">
            
            <el-table
                ref="tableRef"
                v-loading="loading"
                class="mt-2"
                size="large"
                :data="formData.handWaitDeliverInfo"
                row-key="id"
            >
                <el-table-column label="订单号" fixed prop="orderNumber" :show-overflow-tooltip="true" min-width="200"/>
                <el-table-column label="工单号" prop="afterSaleOrderNo" min-width="170"/>
                
                <el-table-column label="状态" prop="status" min-width="120">
                    <template #default="{ row }">
                        
                        <el-tag v-for="(item,index) in afterSaleOrderConfig.afterSaleOrderStatus"
                                v-show="row.status === item.code"
                                :key="index"
                                :disable-transitions="true"
                                :type="item.type">
                            {{ item.name }}
                        </el-tag>
                    </template>
                </el-table-column>
                
                <el-table-column label="类型" prop="afterSaleOrderType" :formatter="formatterManager.formatterOrderType"
                                 min-width="150">
                
                </el-table-column>
                <el-table-column label="来源" prop="source" :formatter="formatterManager.formatterReSource"
                                 min-width="120"></el-table-column>
                
                
                <el-table-column label="渠道" prop="channel" min-width="120"
                                 :formatter="formatterManager.formatterChannel"></el-table-column>
                
                
                <el-table-column label="店铺" prop="shopName" min-width="120"
                                 :formatter="formatterManager.formatterShop"></el-table-column>
                
                
                <el-table-column label="用户名称" prop="userName" min-width="120"/>
                <el-table-column label="用户电话" prop="userPhone" min-width="150"/>
                
                <el-table-column label="寄送物流公司" fixed prop="logisticCompany" min-width="120"/>
                <el-table-column label="寄送物流单号" fixed prop="logisticNumber" min-width="150"/>
            </el-table>
        </el-card>
    
    
    </popup>

</template>

<script lang='ts' setup>

import {FormInstance} from "element-plus";
import Popup from "@/components/popup/index.vue";
import {UnwrapNestedRefs} from "@vue/reactivity";

import {useAfterSaleEnumManager} from "@/manager/base/AfterSaleEnumManager";
import {getAfterSaleLists} from "@/api/afterSale/order/AfterSaleOrderListController";
import {Ref} from "vue";
import AfterSaleOrderSignRequest from "@/api/afterSale/order/request/AfterSaleOrderSignRequest";
import {deliverAfterSaleOrder} from "@/api/afterSale/order/AfterSaleOrderController";
import feedback from "@/utils/feedback";
import {useFormatterManager} from "@/manager/base/FormatterManager";
import AfterSaleOrderSearchRequest from "@/api/afterSale/order/request/AfterSaleOrderSearchRequest";

const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const loading: Ref<boolean> = ref(false)

/**
 * 定义查询数据
 */
let queryFormData: UnwrapNestedRefs<AfterSaleOrderSearchRequest> = reactive(new AfterSaleOrderSearchRequest())
queryFormData.status = 'WAIT_PENDING'


/**
 * 定义提交数据
 */
let formData: UnwrapNestedRefs<AfterSaleOrderSignRequest> = reactive(new AfterSaleOrderSignRequest())
formData.currentStatus = "WAIT_PENDING"

/**
 * 获取售后所有配置
 */
let afterSaleOrderConfig = useAfterSaleEnumManager();
let formatterManager = useFormatterManager(afterSaleOrderConfig);

/**
 * 处理物流货物登记
 *
 * @author 徐寿春
 * 2023/4/8 13:43
 */
function handleDeliverRegister() {
    
    getAfterSaleLists(queryFormData).then(response => {
        // 数组
        if (response?.length == 0) {
            feedback.msgError("查询待妥投工单无此快递单号")
        } else {
            for (let responseKey of response) {
                formData.handWaitDeliverInfo.push(responseKey)
            }
        }
        
    })
    
}


/**
 * 弹窗打开
 */
function open() {
    popupRef.value?.open()
}


/**
 *     确认提交
 *
 * @author 徐寿春
 * 2023/4/8 u
 */
function handleConfirm() {
    deliverAfterSaleOrder(formData).then(() => {
        feedback.notifySuccess("批量妥投成功")
        popupRef.value?.close()
        
        emit('confirm')
        
    })
    
    
}


/**
 *  弹窗关闭
 *
 * @author 徐寿春
 * 2023/4/8 13:28
 */
function handleClose() {
    emit('close')
}

const emit = defineEmits(['confirm', 'close'])
defineExpose({
    open
})


</script>

